<template>
  <el-row class="mb-4 myrow" align="middle">
    <el-col :span="8" :offset="8">
      <el-form
        ref="ruleFormRef"
        :label-position="labelPosition"
        label-width="100px"
        :model="user"
        style="max-width: 460px"
      >
        <el-form-item label="用户名">
          <el-input v-model="user.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submitForm()"> 登录 </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
// 使用 pinia
import { useLoginStore } from "@/store/loginStore.js";
// axios
import { post } from "@/utils/request.js";

// 定义 store 变量
const loginStore = useLoginStore();

const router = useRouter();
const { ctx } = getCurrentInstance();

const ruleFormRef = ref(null);

const user = ref({});
const labelPosition = ref("right");
function submitForm() {
  // post("/login", user.value).then((data) => {
  //   console.log(data);
  // });
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });

  // if (user.value.username === "admin" && user.value.password === "123456") {
  //   console.log("登录成功");
  //   // 将 用户名 存到 pinia 中
  //   // loginStore.username = user.value.username; // 直接操作 state
  //   // 调用 action
  //   // loginStore.setUsername(user.value.username); // 调用 action 修改 state
  //   // 修改多个 state
  //   // loginStore.$patch({
  //   //   username: user.value.username,
  //   //   name: "张三",
  //   // });
  //   // router.push({ path: "/index" });
  // } else {
  //   console.log("登录失败");
  // }
}
</script>
<style scoped>
.myrow {
  margin-top: 100px;
}
</style>
